<!--
* @FileDescription: 首次默认无数据查询访问曲线无数据页面
* @Author: yuec621@outlook.com
* @Date: 2024-12-15 12:28:48
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-25 14:22:19
-->
<template>
    <div style="background-color: rgba(255, 255, 255, .6);border-radius: 8px;padding: 16px;height: 100%;width: 100%;">
        <el-row :gutter="20">
            <el-col :span="24">
                <span>{{configtitle}}配置</span>
            </el-col>
            <el-col :span="24" style="display: flex;justify-content: space-between;margin: 10px 0;">
                <div class="tabdiyBox">
                    <span class="hover" v-for="item in tabList" :key="item.type" @click="tabClick(item)"
                        :class="state.tabType == item.type ?'active':''">{{item.name}}</span>
                </div>
                <div class="btnSpanList" v-if="state.tabType ==1">
                    <span class="btnSpan" ref="searListRef" style="margin-right: 10px;" @click="hisListClick">
                        <svg-icon icon-class="shijian" />查询历史</span>
                    <span ref="usetempRef" class="btnSpan" @click="usetempClick">
                        <svg-icon icon-class="moban" />使用模板</span>
                </div>
            </el-col>
            <el-col :span="24" v-if="state.tabType ==1">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="rightsear colgrid">
                            <div class="boxList" v-for="item in searListData" :id="item.id">
                                <el-row :gutter="23">
                                    <el-col :span="item.col" style="margin-bottom: 10px;"
                                        v-for="itemSub in item.descList">
                                        <span
                                            style="display: inline-block;margin-bottom: 10px;color: rgba(62, 70, 79, 0.8);">{{ itemSub.label }}</span>
                                        <div class="formLabel">
                                            <el-date-picker v-if="itemSub.type==='timeRangepagefk'" @change="timeChange"
                                                v-model="itemSub.bindData[0]" type="datetime" placeholder="开始时间" />
                                            <el-date-picker @change="timeChange1"
                                                v-if="itemSub.type==='timeRangepagefk'" v-model="itemSub.bindData[1]"
                                                type="datetime" placeholder="结束时间" />
                                            <el-date-picker v-if="itemSub.type==='timeRangepage'" class="w100"
                                                v-model="itemSub.bindData" type="datetimerange" start-placeholder="开始时间"
                                                @calendar-change="handleCalendarChange" end-placeholder="结束时间" />
                                            <el-date-picker v-if="itemSub.type==='daterange'" class="w100"
                                                v-model="itemSub.bindData" type="daterange" start-placeholder="开始日期"
                                                end-placeholder="结束日期" />
                                            <el-select class="w100" v-if="itemSub.type==='select'"
                                                v-model="itemSub.bindData" clearable placeholder="请选择"
                                                @change="searchChange(itemSub,$event)">
                                                <el-option v-for="item in itemSub.options" :key="item.value"
                                                    :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                            <el-cascader ref="cascaderLabelRef" v-model="itemSub.bindData" class="w100"
                                                v-if="itemSub.type==='cascadercheckStrictly'"
                                                @change="cascaderLabelChange($event,itemSub)" :options="itemSub.options"
                                                :props="itemSub.props" clearable />
                                            <el-radio-group class="equal-width-group" v-if="itemSub.type==='radio'"
                                                v-model="itemSub.bindData" @change="radioChange($event,itemSub)">
                                                <el-radio v-for="itemop in itemSub.options" :label="itemop.value"
                                                    size="large">
                                                    {{itemop.label}}</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="colgrid" style="position: relative;">
                            <div class="tableListTotal">
                                <span class="tableTile">测点列表
                                    <span v-if="noconnected" style="color: rgba(62, 70, 79, 0.8);margin-left: 5px;">
                                        只显示关联
                                        <el-switch style="margin-left: 5px;" @change="switchChange"
                                            v-model="state.searchObj.isConnected" /></span>
                                </span>
                                <span class="tableNum">{{state.rightListadjust.length}}/
                                    {{state.leftListnum}}</span>
                            </div>
                            <vxe-table height="90%" :loading="state.tableloading"
                            :checkboxConfig="{checkMethod: checkSelectMethod}" @checkbox-change="selectChangeEvent"
                                @checkbox-all="selectChangeEventAll" ref="leftTable" stripe
                                @cell-mouseenter="cellmouseenter" :data="state.leftList">
                                <vxe-column type="checkbox" :width="55"></vxe-column>
                                <vxe-column title="测点号" field="pointId">
                                    <template #default="{ row }">
                                        {{ row.pointId }}
                                        <svg-icon v-if="row.connectPointDtoList.length>0&&noconnected"
                                            style="fill:rgb(68, 136, 255)" icon-class="guanlian" />
                                    </template>
                                </vxe-column>
                                <vxe-column title="设备名称" field="sensorName"> </vxe-column>
                                <vxe-column title="安装地点" field="placeName"> </vxe-column>
                                <!-- <template #empty>
                                    <span class="nodataClass">
                                        <img src="@/assets/images/nodata.png">
                                        <p>暂未查询到结果</p>
                                    </span>
                                </template> -->
                            </vxe-table>

                            <!-- 关联测点列表小弹框 -->
                            <connectPointCom v-if="state.connectPointDtoObj.list.length>0&&noconnected"
                                :connectPointDtoList="state.connectPointDtoObj.list"
                                style="position: absolute;width: 95%;" :style="{
            top:state.connectPointDtoObj.y+'px',
            left:state.connectPointDtoObj.x+'px',
            zIndex:9
        }" @connectPointClick="connectPointClick"></connectPointCom>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="colgrid">
                            <div class="tableListTotal" style="display: flex;align-items: center;">
                                <span class="tableTile">已选测点
                                    <span class="tableNum">还可选择 <em>{{6-state.rightList.length}}</em>
                                        个测点</span>
                                </span>
                                <span class="tableNum">
                                    <svg-icon icon-class="shanchu" class="hover" @click="removerRightClick()" />
                                </span>
                            </div>
                            <vxe-table height="90%" 
                              stripe :data="state.rightList">
                                <vxe-column title="测点号" field="pointId">
                                </vxe-column>
                                <vxe-column title="设备名称" field="sensorName"> </vxe-column>
                                <vxe-column title="安装地点" field="placeName"> </vxe-column>
                                <vxe-column title="移除">
                                    <template #default="{ row }">
                                        <svg-icon class="hover" icon-class="tubiaoneiguanbi"
                                            @click="removeClick(row)" />
                                    </template>
                                </vxe-column>
                                <template #empty>
                                    <span class="nodataClass">
                                        <img src="@/assets/images/nodata.png">
                                        <p>暂未查询到结果</p>
                                    </span>
                                </template>
                            </vxe-table>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="24" v-if="state.tabType ==2">
                <chartattr :attrList="state.attrList" @submitClickattr="submitClickattr" :chartType="chartType"
                    :attrObj="attrObj">
                </chartattr>
            </el-col>
        </el-row>
        <div class="form_footer" style="display: flex;justify-content: space-between;margin-top: 0;">
            <span>
                <el-button type="success" @click="tempSaveClick">保存为模板</el-button>
            </span>
            <span>
                <el-button type="info" @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="submitClick">确定</el-button>
            </span>
        </div>
        <!-- 保存模板卡片 -->
        <saveTempCom @submitForm="submitForm" :tempShow="state.tempShow" :tempList="state.rightList"></saveTempCom>
        <!-- 查询历史卡片 -->
        <hisSearchList :style="{position: 'absolute',left:state.serXY.x+'px',top:state.serXY.y+'px',zIndex:11}"
            @clearSaveClick="clearSaveClick" @searsubmitClick="searsubmitClick" :searList="state.searList"
            v-if="state.searListShow" @searcancelClick="searcancelClick"></hisSearchList>
        <!-- 使用模板卡片 -->
        <useTempCom :style="{position: 'absolute',
            left:state.useTempXY.x+'px',top:state.useTempXY.y+'px',zIndex:11}" @delUseTempClick="delUseTempClick"
            @submitUseTempClick="submitUseTempClick" :tableData="state.tableData" v-if="state.useTempShow"></useTempCom>

    </div>
</template>
<script setup>
    import saveTempCom from "./saveTempCom.vue";
    import hisSearchList from "./hisSearchList.vue";
    import useTempCom from "./useTempCom.vue";
    import chartattr from "./chartattr.vue";
    import connectPointCom from "./connectPointCom.vue";
    import {
        computed,
        reactive,
        watchEffect,
        watch
    } from 'vue';
    import axios from "@/utils/request"
    import {
        getinfolistSensorNames,
        getinfolistSwitchNames,
        getinfogainAddNames,
        getaddressInfo,
        searchareaTree,
        getinfopumpNames,
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import _ from 'lodash'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const searListRef = ref(null)
    const props = defineProps({
        configtitle: {
            type: String,
            default: () => {
                return '曲线'
            }
        },
        noconnected: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        formatValue: {
            type: Boolean,
            default: () => {
                return undefined
            }
        },
        chartType: {
            type: Number,
            default: () => {
                return 1
            }
        },
        searListData: {
            type: Array,
            default: () => {
                return []
            }
        },
        attrObj: {
            type: Object,
            default: () => {}
        },
        tabList: {
            type: Array,
            default: () => {
                return [{
                    type: 1,
                    name: '测点选择'
                }, {
                    type: 2,
                    name: '属性'
                }]
            }
        },
        lineConParams: {
            type: Object,
            default: () => {}
        },
    })
    const emits = defineEmits(['toolChange'])
    // 重点

    const state = reactive({
        dateRange: [],
        tableloading: false,
        tooltipConfig: {
            enterable: true, // 鼠标可进入tooltip
            placement: 'right', // 显示在右侧
            theme: 'light' // 主题样式
        },
        connectPointDtoObj: {
            list: [],
            x: 0,
            y: 0
        },
        // 查询历史数据
        searList: [],
        searListShow: false,
        serXY: {
            x: undefined,
            y: undefined
        },
        attrList: [],
        attrObj: undefined,
        tabType: 1,
        leftList: [],
        leftListnum: 0,
        rightList: [],
        rightListadjust: [], //用于判断切换测点列表数量显示
        tempShow: false,
        useTempShow: false,
        useTempXY: {
            x: undefined,
            y: undefined
        },
        searchObj: {
            isConnected: false,
            type: props.lineConParams.type
        },
        attrDataList: [],
        sensorBoolean: false
    })

    function timeChange(val) {
        props.searListData[0].descList[0].bindData[1] = dayjs(val).add(1, 'hour').format('YYYY-MM-DD HH:mm:ss')
    }

    function timeChange1(val) {
        if (props.searListData[0].descList[0].bindData[0] == '') {
            proxy.$modal.msgWarning('请先选择开始时间');
            props.searListData[0].descList[0].bindData[1] = ''
        }
    }

    // 只显示关联
    function switchChange(val) {
        getList(state.searchObj)
    }
    // 单选事件
    async function radioChange(val, selitem) {
        emits('radioChange', val, selitem)
        if (selitem.judcond == 'deviceType') {
            state.rightListadjust = []
            state.searchObj.type = val
            state.searchObj.sensorName = undefined
            let arr = []
            if (val == 'A') {
                arr = await getinfolistSensorNames()
                state.rightList.forEach(item => {
                    if (item.pointId.includes('A')) {
                        state.rightListadjust.push(item)
                    }
                })
            } else if (val == 'D') {
                arr = await getinfolistSwitchNames()
                state.rightList.forEach(item => {
                    if (item.pointId.includes('D')) {
                        state.rightListadjust.push(item)
                    }
                })
            } else if (val == 'S') {
                arr = await getinfogainAddNames()
                state.rightList.forEach(item => {
                    if (item.pointId.includes('S')) {
                        state.rightListadjust.push(item)
                    }
                })
            }
            props.searListData.forEach(item => {
                item.descList.forEach(async itemsub => {
                    if (val != 'A') {
                        if (itemsub.judcond == 'jingdu') {
                            itemsub.label = undefined
                            itemsub.type = undefined
                        }
                    } else {
                        if (itemsub.judcond == 'jingdu') {
                            itemsub.label = '测点精度'
                            itemsub.type = 'radio'
                        }
                    }
                    if (itemsub.judcond == 'sensorchoiceName') {
                        itemsub.bindData = undefined
                        itemsub.options = arr.data.map(key => {
                            return {
                                label: key,
                                value: key
                            }
                        })
                    }
                })
            })
        }
        await getList(state.searchObj)
    }

    function searchChange(val, e) {
        if (val.judcond == 'deviceCate') {
            state.searchObj[val.field] = e
            // 切换清除传感器名称填充数据
            state.searchObj.choiceName = undefined
            state.searchObj.sensorName = undefined
            props.searListData.forEach(item => {
                item.descList.forEach(async itemsub => {
                    if (itemsub.judcond == 'sensorchoiceName') {
                        itemsub.bindData = undefined
                        let arr = []
                        if (e) {
                            arr = await getinfopumpNames()
                            itemsub.options = arr.data.map(key => {
                                return {
                                    label: key,
                                    value: key
                                }
                            })
                        } else {
                            arr = await getinfolistSensorNames()
                            itemsub.options = arr.data.map(key => {
                                return {
                                    label: key,
                                    value: key
                                }
                            })
                        }
                    }
                })
            })
        } else if (val.judcond == 'sensorchoiceName') {
            if (state.searchObj.flag) {
                state.searchObj[val.field] = e
            } else {
                state.searchObj[val.fieldT] = e
            }
        } else {
            state.searchObj[val.field] = e
        }
        getList(state.searchObj)
    }

    function cascaderLabelChange(val, item) {
        if (item.judcond == 'areaName') {
            state.searchObj[item.field] = val
            state.searchObj[item.fieldT] = proxy.$refs.cascaderLabelRef[0]
                .getCheckedNodes()[0]
                .label
        }
        getList(state.searchObj)
    }
    let lineConParams = computed(() => {
        return props.lineConParams
    })

    function tabClick(item) {
        let colors = ['rgba(68, 170, 255, 1)', 'rgba(212, 63, 63, 1)', 'rgba(42, 130, 228, 1)',
            'rgba(121, 72, 234, 1)'
        ]
        state.tabType = item.type
        if (state.rightList.length > 0) {
            let arr = []
            state.rightList.forEach((item, index) => {
                if (props.chartType == 1) {
                    arr.push({
                        pointId: item.pointId,
                        linechart: '曲线' + item.pointId + '-最大值',
                        type: 'max',
                        lineWidth: 2,
                        lineType: 'solid',
                        lineColor: colors[index],
                        chartType: false,
                        dotSwitch: false
                    }, {
                        pointId: item.pointId,
                        linechart: '曲线' + item.pointId + '-最小值',
                        type: 'min',
                        lineWidth: 2,
                        lineType: 'solid',
                        lineColor: colors[index],
                        chartType: false,
                        dotSwitch: false
                    }, {
                        pointId: item.pointId,
                        linechart: '曲线' + item.pointId + '-平均值',
                        type: 'avg',
                        lineWidth: 2,
                        lineType: 'solid',
                        lineColor: colors[index],
                        chartType: false,
                        dotSwitch: false
                    })
                } else if (props.chartType == 2) {
                    arr.push({
                        type: 'max',
                        pointId: item.pointId,
                        linechart: item.pointId,
                        lineColor: colors[index]
                    })
                }
            })
            state.attrList = arr
        }
        if (item.type == 2) {
            state.rightList = state.rightList
        }
    }
    // 列表复选
    // 操作
    function cellmouseenter(e) {
        state.connectPointDtoObj.x = 10
        state.connectPointDtoObj.y = e.$event.clientY - 180
        if (e.row.connectPointDtoList.length > 0) {
            state.connectPointDtoObj.list = e.row.connectPointDtoList
        } else {
            state.connectPointDtoObj.list = []
        }
    }

    function cellmouseleave() {
        state.connectPointDtoObj.list = []
    }
    // 关联列表选择
    function connectPointClick(item) {
        state.rightList.push(item)
        if (item.show) {
            state.rightList = _.uniqBy(state.rightList, 'pointId')
        } else {
            state.rightList = state.rightList.filter(itemsub => itemsub.pointId !== item.pointId);
        }
    }

    function selectChangeEventAll(e) {
        if (e.records.length >= 6) {
            proxy.$modal.msgWarning('最多只能选择6个测点!');
            state.rightList = e.records.splice(0, 6)
            state.leftList = e.records
            state.rightListadjust = state.rightList
        } else {
            state.rightList.push(...e.records)
            state.rightListadjust = state.rightList
            state.leftList = []
        }
    }
    const checkSelectMethod = ({
        row
    }) => {
        // 如果已选中数量小于6或者当前行已被选中，则允许选中
        return state.rightList.length < 6 || state.rightList.includes(row);
    };
    const selectChangeEvent = ({
        records
    }) => {
        state.leftList = _.differenceBy(state.leftList, records, 'pointId')
        state.rightList.push(...records)
        state.rightList = _.uniqBy(state.rightList, 'pointId')
        state.rightListadjust.push(...records)
    }
    // 移除操作按钮事件
    function removeClick(row) {
        proxy.$refs['leftTable'].clearCheckboxRow()
        state.rightList = _.differenceBy(state.rightList, [row], 'pointId')
        state.rightListadjust = _.differenceBy(state.rightListadjust, [row], 'pointId')
        nextTick(() => {
            getList(state.searchObj)
        })
    }
    // 删除右侧全部列表
    function removerRightClick() {
        // 获取表格实例，然后设置 selected 为空数组
        proxy.$refs['leftTable'].clearCheckboxRow()
        state.rightList = []
        props.lengedList = []
        state.rightListadjust = []
        getList(state.searchObj)
    }
    // 获取列表数据接口
    function getList(data) {
        state.tableloading = true
        axios.post(lineConParams.value.pointUrl, data).then(
            res => {
                state.tableloading = false
                state.leftList = res.data
                state.leftListnum = res.data.length
                let arr = state.rightList.map(itemsub => {
                    return itemsub.pointId
                })
                state.leftList = state.leftList.filter((x) => arr.every((y) => y != x.pointId))
            })
    }
    // 保存为模板按钮
    function tempSaveClick() {
        if (state.rightList.length == 0) {
            proxy.$modal.msgWarning('请先选择测点');
            state.tempShow = false
        } else {
            state.tempShow = new Date()
        }
    }
    // 保存模板
    function submitForm(data) {
        data.pointIds = data.pointIds.join(';')
        axios.post(lineConParams.value.addTemSave, data).then(
            res => {
                proxy.$modal.msgSuccess(res.msg);
                state.tempShow = false
            })
        getuseTempList()
    }
    // 提交
    function submitClick(data) {
        let acSearchList = []
        props.searListData.forEach(item => {
            if (item.id != 'time') {
                item.descList.forEach(itemsub => {
                    if (itemsub.judcond == 'deviceType') {
                        acSearchList.push(itemsub)
                    }
                })
            }
        })
        let rightListdata = state.rightList
        let rangetime = props.searListData[0].descList[0].bindData
        if (rightListdata.length > 0 && rangetime) {
            rightListdata.forEach(item => {
                if (state.attrList.length > 0) {
                    state.attrList.forEach(itemsub => {
                        if (item.pointId == itemsub.pointId) {
                            if (itemsub.type == 'max') {
                                item.maxlineWidth = itemsub.lineWidth
                                item.maxlineType = itemsub.lineType
                                item.maxlineColor = itemsub.lineColor
                                item.maxchartType = itemsub.chartType
                                item.maxdotSwitch = itemsub.dotSwitch
                            }
                            if (itemsub.type == 'min') {
                                item.minlineWidth = itemsub.lineWidth
                                item.minlineType = itemsub.lineType
                                item.minlineColor = itemsub.lineColor
                                item.minchartType = itemsub.chartType
                                item.mindotSwitch = itemsub.dotSwitch
                            }
                            if (itemsub.type == 'avg') {
                                item.avglineWidth = itemsub.lineWidth
                                item.avglineType = itemsub.lineType
                                item.avglineColor = itemsub.lineColor
                                item.avgchartType = itemsub.chartType
                                item.avgdotSwitch = itemsub.dotSwitch
                            }
                        }
                    })
                }
            })
            emits('toolChange', {
                type: 'legendshow',
                rangetime: rangetime,
                attrObj: state.attrObj,
                data: rightListdata,
                acSearchList: acSearchList
            })
            emits('toolChange', {
                type: 'dateType',
                data: rangetime
            })
            let datapoint = rightListdata.map(item => {
                return item.pointId
            })
            if (state.tabType != 2) {
                axios.post(lineConParams.value.hisSearchSave, {
                    pointIds: datapoint.join(';')
                }).then(res => {
                    proxy.$modal.msgSuccess(res.msg);
                })
            }
        } else {
            proxy.$modal.msgWarning('请选择所要查询的测点编号或时间范围！');
        }
    }
    // 提交曲线属性数据
    function submitClickattr(data) {
        state.attrObj = data
    }
    // 查询历史数据
    const getinfosearchlistSwitch = (data) => {
        return axios({
            url: '/simulate/history/attainPointInfo',
            method: 'post',
            data: data
        })
    }
    // 点击查询历史按钮事件
    async function hisListClick() {
        state.searListShow = !state.searListShow
        await axios.post(lineConParams.value.hisSearchList, {
            pageNum: 1,
            pageSize: 10
        }).then(res => {
            res.data.list.forEach(async item => {
                item.checked = false
                let listData = await getinfosearchlistSwitch({
                    pointIds: item.pointIds
                })
                item.pointIds = listData.data
            })
            state.serXY.x = searListRef.value.offsetLeft - 360
            state.serXY.y = searListRef.value.offsetTop + 60
            state.searList = res.data.list
        })
    }

    function searcancelClick(val) {
        state.searListShow = val
    }
    // 清楚全部历史操作
    function clearSaveClick(ids) {
        axios.post(lineConParams.value.hisSearchDel, ids)
            .then(res => {
                proxy.$modal.msgSuccess(res.msg);
                hisListClick()
            })
    }
    // 提交选中历史操作
    function searsubmitClick(data) {
        if (data.data && data.rangetime) {
            emits('toolChange', {
                type: 'legendshow',
                data: data.data.pointIds
            })
            emits('toolChange', {
                type: 'dateType',
                data: data.rangetime
            })
            state.searListShow = false
        } else {
            proxy.$modal.msgWarning('请先选择一组所要查询的历史数据!或查询时间');
        }
    }
    // 使用模板使用事件功能
    function submitUseTempClick(data) {
        emits('toolChange', {
            type: 'legendshow',
            data: data.pointIds
        })
        emits('toolChange', {
            type: 'dateType',
            data: []
        })
        state.searListShow = false
    }
    // 使用模板
    // 使用模版列表接口
    function getuseTempList() {
        axios.post(lineConParams.value.tempList, {
            pageNum: 1,
            pageSize: 10
        }).then(res => {
            state.tableData = res.data.list
            res.data.list.forEach(async item => {
                item.checked = false
                let listData = await getinfosearchlistSwitch({
                    pointIds: item.pointIds
                })
                item.pointIds = listData.data
            })
        })
    }

    function usetempClick() {
        state.useTempShow = !state.useTempShow
        getuseTempList()
        state.useTempXY.x = proxy.$refs.usetempRef.offsetLeft - 240
        state.useTempXY.y = proxy.$refs.usetempRef.offsetTop + 60
    }

    function delUseTempClick(ids) {
        axios.post(lineConParams.value.delTemp, ids).then(res => {
            usetempClick()
            proxy.$modal.msgSuccess(res.msg);
        })
    }
    // 获取模拟量开关量累计量地点等下拉数据接口
    // 默认进入页面加载下拉接口
    if (props.searListData.length > 0) {
        props.searListData.forEach(async item => {
            await item.descList.forEach(async itemsub => {
                if (itemsub.iSdefault) {
                    state.searchObj[itemsub.field] = itemsub.bindData
                }
                if (itemsub.judcond == 'sensorchoiceName') {
                    let arr = []
                    if (lineConParams.value.type == 'A') {
                        if (state.searchObj.flag) {
                            arr = await getinfopumpNames()
                        } else {
                            arr = await getinfolistSensorNames()
                        }
                    } else if (lineConParams.value.type == 'D') {
                        arr = await getinfolistSwitchNames()
                    } else if (lineConParams.value.type == 'S') {
                        arr = await getinfogainAddNames()
                    }
                    itemsub.options = arr.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })
                }
                if (itemsub.judcond == 'areaName') {
                    let arr = await searchareaTree()
                    itemsub.options = arr.data
                }
                if (itemsub.judcond == 'placeName') {
                    let arr = await getaddressInfo()
                    itemsub.options = arr.data.list.map(item => {
                        return {
                            label: item.placeName,
                            value: item.placeName
                        }
                    })
                }
            })
        })
        getList(state.searchObj)
    }
</script>
<style lang="scss" scoped>
    .equal-width-group {
        display: flex;
        width: 100%;
        justify-content: start;
    }

    .equal-width-group .el-radio {
        width: 20%;
    }

    :deep(.formLabel) {
        span {
            margin-right: 0 !important;
        }
    }

    .tableListTotal {
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(91, 109, 128, 0.04);
        padding: 8px 10px;
        border-radius: 8px 8px 0px 0px;
        background: rgba(91, 109, 128, 0.04);

        .tableTile {
            font-size: 16px;
            font-weight: 700;

            em {
                font-size: 14px;
                font-style: normal;
                color: rgba(68, 136, 255, 1);
            }
        }

        .tableNum {
            font-size: 16px;
            font-weight: 400;
            color: rgba(62, 70, 79, 0.8);
        }
    }

    .colgrid {
        background-color: rgba(255, 255, 255, .6);
        border-radius: 8px;
        height: 74vh;
    }

    .rightsear {
        font-size: 16px;

        .boxList {
            padding: 0 10px;
            margin: 0px 0px 0px 0px;

            &:first-child {
                padding-top: 10px;
            }

            h2 {
                font-size: 16px;
                color: rgba(62, 70, 79, 1);
                font-weight: 700;
                padding: 0;
                margin: 0px 0 16px 0;
            }

            p {
                padding: 0;
                margin: 0;
            }
        }
    }
</style>